<script setup lang="ts">
  import { useMemberStore } from '@/stores'
  import { postLogoutAPI } from '@/services/login'
  import { onLoad, onPullDownRefresh, onShow } from '@dcloudio/uni-app'
  import { ref } from 'vue'
  import { useReturnStore } from '@/stores/modules/returnStore'
  import { queryFileCollectByUser } from '@/services/collect'

  // 获取屏幕边界到安全区域距离
  const { safeAreaInsets } = uni.getSystemInfoSync()
  const returnStore = useReturnStore()

  // 获取会员信息
  const memberStore = useMemberStore()
  const userinfo : any = memberStore.getUserInfo()
  //订单列表
  const ordelist = ref<any[]>([{
    num: 1,
    title: '标准订单',
    type: 0,
  },
  {
    num: 1,
    title: '定制订单',
    type: 0,
  }, {
    num: 1,
    title: '直营家装',
    type: 0,
  }, {
    num: 1,
    title: '工程订单',
    type: 0,
  }])
  const collectList = ref<any[]>([{
    num: 1,
    title: '商品',
    type: 7,
  }, {
    num: 1,
    title: '海报',
    type: 4,
  }, {
    num: 1,
    title: '视频',
    type: 3,
  }, {
    num: 1,
    title: '效果图',
    type: 5,
  }, {
    num: 1,
    title: '设计方案',
    type: 6,
  }, {
    num: 1,
    title: '定制手册',
    type: 1,
  }, {
    num: 1,
    title: '文件',
    type: 2,
  }])
  onShow(() => {

    console.log(collectList.value)
    getNum()
  })
  //字典表 类型 1.手册 2.文件 3.视频 4.海报 5.效果图 6.设计方案
  onLoad(() => {

  })
  //刷新
  onPullDownRefresh(() => {
    getNum()
  })
  //查询收藏统计信息
  const getNum = () => {

    queryFileCollectByUser({ "userCode": userinfo.userCode }).then((res : any) => {
      console.log("ok:");
      //后端返回的结果集形如:{ "1": 2, "2": 1 }
      // 给定的结果集
      const resultSet = res;

      console.log(resultSet);
      // 遍历 collectList.value，生成最终结果
      collectList.value.forEach(item => {
        const type = item.type.toString();
        console.log(type, resultSet[type])
        item.num = resultSet[type] || 0; // 如果在结果集中，使用结果集的值，否则为 0
      });
      console.log(collectList.value);
    })
  }
  //设置跳转
  const settingClick = () => {
    uni.navigateTo({
      url: '/pagesMember/settings/settings'
    })
  }
  //问题反馈
  const feedbackClick = () => {

  }


  // 退出登录
  const onLogout = () => {
    // 模态弹窗
    uni.showModal({
      content: '是否退出登录？',
      confirmColor: '#54B9CC',
      success: (res) => {
        if (res.confirm) {
          // 退出接口
          postLogoutAPI()
          uni.showToast({ icon: 'success', title: '退出成功' })
          // 清理用户信息
          memberStore.clearProfile()
          // 页面跳转
          uni.reLaunch({ url: '/pages/login/login' })
        }
      },
    })
  }
  //我的收藏
  function getToCollect(item : any) {
    console.log(JSON.stringify(item));
    //有内容才跳转
    if (item.num == 0) {
      uni.showToast({
        title: '还没有收藏',
        icon: 'none'
      })
      return
    }
    if (item.type == 1) {//手册
      uni.navigateTo({
        url: `/pagesMember/manuals/manuals?collect=true`
      })
    } else if (item.type == 2) {//文件
      uni.navigateTo({
        url: `/pagesMember/file/fileList?collect=true`
      })
    } else if (item.type == 3) {//视频
      uni.navigateTo({
        url: `/pagesMember/video/video?collect=true`
      })
    } else if (item.type == 4) {//海报
      uni.navigateTo({
        url: `/pagesMember/poster/poster?collect=true`
      })
    } else if (item.type == 5) {//效果图
      uni.navigateTo({
        url: `/pagesMember/renderings/renderings?collect=true`
      })
    } else if (item.type == 6) {//设计方案
      uni.navigateTo({
        url: `/pagesMember/design/design?collect=true`
      })
    } else {
      //商品
      uni.navigateTo({
        url: '/pagesMember/collect/product?type=' + item.type
      });
    }


  }

  const getToOrder = (item : any) => {
    uni.navigateTo({
      url: `/pages/mycase/caseList?data=${JSON.stringify(item)}`
    })
  }
</script>

<template>
  <view class="viewport">
    <!-- 个人资料 -->
    <view class="profile">
      <!-- 已登录 -->
      <view class="overview" v-if="memberStore.profile">
        <image class="avatar" :src="userinfo?.userImgurl" mode="aspectFill"></image>
        <view class="meta">
          <view class="username">
            {{userinfo?.userNickname||'姓名'}}
          </view>
          <view class="phone">
            {{ "手机号："+ userinfo?.userPhone }}
          </view>
          <view class="phone">
            {{ "部门：国内营销中心"}}
          </view>
        </view>
        <view class="switch">切换身份</view>
      </view>

    </view>

    <!-- <view class="options">
      <button class="button_container" @click="goContact">
        <text>修改密码</text><text class="icon-right" />
      </button>
      <view class="diviler" />
      <button class="button_container" open-type="contact">
        <text>问题反馈</text><text class="icon-right" />
      </button>
    </view> -->
    <view class="collect_title">我的收藏</view>
    <view class="collect_container">
      <view class="collect_item" v-for="item in collectList">
        <view class="item_title" @tap="getToCollect(item)">{{item.num}}</view>
        <view class="text">{{item.title}}</view>
      </view>
    </view>
  <!--  <view class="collect_title">我的订单</view>
    <view class="collect_container">
      <view class="collect_item" v-for="item in ordelist">
        <view class="item_title" @tap="getToOrder(item)">{{item.num}}</view>
        <view class="text">{{item.title}}</view>
      </view>
    </view> -->
    <view class="bottom-contianer">
      <button class="button_normal" @click="subScrip">问题反馈</button>
      <button class="button" @click="settingClick">设置</button>
    </view>
  </view>
</template>

<style lang="scss">
  @import '../index/styles/index.scss';

  .page {
    --nut-button-large-font-size: 32rpx;
    --nut-primary-color: #54B9CC;
    --nut-button-large-height: 96rpx;
    --nut-button-large-line-height: 96rpx;
    --nut-button-border-radius: 16rpx;
  }

  .viewport {
    width: 750rpx;
    height: 100%;
    background: linear-gradient(#E5FBFF 0%, #FFFFFF 100%);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    display: flex;
    flex-direction: column;
  }

  .switch {
    position: absolute;
    right: 0rpx;
    top: 32rpx;
    width: 156rpx;
    height: 54rpx;
    background: linear-gradient(270deg, #ACF2FF 0%, #D8F9FF 100%);
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 129, 204, 0.1);
    border-radius: 20rpx 0rpx 0rpx 20rpx;
    font-weight: bold;
    font-size: 26rpx;
    color: #54B9CC;
    line-height: 50rpx;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }

  .profile {
    position: relative;
    margin-top: 155rpx;
    margin-left: 24rpx;
    margin-right: 24rpx;
    padding-top: 30rpx;
    padding-bottom: 30rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(209, 227, 230, 0.58);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    border: 0rpx solid rgba(84, 185, 204, 0.15);

    .overview {
      display: flex;
      padding: 20rpx;
      color: #333;
    }

    .avatar {
      width: 128rpx;
      height: 128rpx;
      border-radius: 50%;
      background-color: #54B9CC;
    }

    .gray {
      filter: grayscale(100%);
    }

    .meta {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      margin-left: 30rpx;
    }

    .username {
      font-size: 34rpx;
      color: #1C253A;
      margin-bottom: 12rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .phone {

      color: #394259;
      font-size: 28rpx;
      margin-top: 4rpx;
      overflow: hidden;
    }

    .badge {
      display: inline-block;
      padding: 4rpx 10rpx 2rpx 14rpx;
      margin: 2rpx 0 0 10rpx;
      font-size: 26rpx;
      color: #54B9CC;
      border-radius: 6rpx;
      border: 1rpx solid #54B9CC;
    }

    .extra {
      display: flex;
      font-size: 20rpx;
    }

    .tips {
      font-size: 22rpx;
    }

    .update {
      padding: 3rpx 10rpx 1rpx;
      color: rgba(255, 255, 255, 0.8);
      border: 1rpx solid rgba(255, 255, 255, 0.8);
      margin-right: 10rpx;
      border-radius: 30rpx;
    }

    .settings-text {
      position: absolute;
      top: 20rpx;
      right: 40rpx;
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .collect_title {
    height: 48rpx;
    font-weight: bold;
    font-size: 32rpx;
    margin-left: 24rpx;
    margin-top: 32rpx;
    color: #1C253A;
    line-height: 48rpx;
    text-transform: none;

  }

  .collect_container {
    display: flex;
    justify-content: space-between;
    display: grid;
    grid-template-columns: repeat(4, 22%);
    grid-row-gap: 24rpx;
    margin: 24rpx;
    padding: 24rpx 0rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    border: 0rpx solid #E1F1F5;

    .collect_item {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      position: relative;

      .item_title {
        height: 48rpx;
        font-weight: bold;
        font-size: 32rpx;
        color: #54B9CC;
        line-height: 48rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }

      .text {
        height: 40rpx;
        font-size: 28rpx;
        color: #888E98;
        margin-top: 10rpx;
        line-height: 40rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
  }

  .options {
    position: relative;
    z-index: 99;
    padding: 10rpx 30rpx;
    margin: 30rpx;
    background-color: #fff;
    border-radius: 10rpx;
    box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);

    .button_container {
      display: flex;
      flex-direction: row;
      background-color: transparent;
      font-size: 30upx;
      padding: 15rpx 0;
      justify-content: space-between;
      align-items: center;
      color: #666;

      .logo-image {
        width: 45rpx;
        height: 45rpx;
        margin-right: 25rpx;
      }
    }
  }

  .diviler {
    width: 100%;
    height: 2rpx;
    background-color: #eaeaea;
  }

  .bottom-contianer {
    position: fixed;
    bottom: 50rpx;
    width: 100%;
    z-index: 99;
    display: flex;
    flex-direction: row;
  }

  .button {
    width: 45%;
    background-color: #54B9CC;
    color: white;
    font-size: 32rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .button_normal {
    width: 45%;
    color: #54B9CC;
    font-size: 32rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    border: 2rpx solid #54B9CC;
  }
</style>
